<template>
  <div id="blockchain">
    <div class="wrapper">
      <div class="title_box">
        <img
          class="logo"
          src="@/assets/images/mobile_black/center/address.png"
        />
        <div class="title">区块链地址</div>
        <div class="describe">区块链地址是你在区块链上持有藏品的唯一地址</div>
      </div>

      <div class="address_box">
        <span id="address">{{ userInfo.hashcode }}</span>
        <img
          src="@/assets/images/mobile_black/center/copy.png"
          @click="copyClick"
        />
      </div>

      <!-- 借助textarea实现复制 -->
      <textarea id="copyBackHand"></textarea>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Blockchain",
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    // 复制文本文字
    copyClick() {
      let text = document.getElementById("address").innerText;
      let copyBackHand = document.getElementById("copyBackHand");
      copyBackHand.value = text;
      copyBackHand.select();
      document.execCommand("copy");
      this.$toast({
        className: "cancelMine",
        message: "复制成功",
        duration: 2000,
      });
    },
  },
};
</script>

<style lang="less" scoped>
#blockchain {
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;

  #copyBackHand {
    position: relative;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -10;
  }

  .wrapper {
    width: 100%;
    margin-top: 180px;
    padding: 0 30px;

    .title_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .logo {
        width: 72px;
        height: 80px;
      }

      .title {
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff !important;
        line-height: 36px;
        margin-top: 40px;
      }

      .describe {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        margin-top: 30px;
      }
    }

    .address_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 120px;
      background: #2b2c2d;
      margin-top: 120px;
      padding: 0 40px;

      span {
        width: 514px;
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 40px;
        word-break: break-all;
      }

      img {
        width: 28px;
        height: 28px;
      }
    }
  }
}
</style>
